<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
              <j-date placeholder="请选择开始时间" @change="change" v-model="model.startTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
              <j-date disabled placeholder="请选择结束时间" v-model="model.endTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportYear">
              <a-input-number v-model="model.reportYear" placeholder="请输入年份" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reportPeriod">
              <a-input-number v-model="model.reportPeriod" placeholder="请输入期" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="总体TOP" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="top">
              <a-input-number v-model="model.top" placeholder="请输入总体TOP" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import moment from 'moment'

export default {
  name: "Step1",
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
  },
  data () {
    return {
      model:{
        id:null,
        endTime:null,
        startTime:null,
        reportYear:null,
        top:null
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
      },
    }
  },
  methods:{
    change(){
      console.log(this.model.startTime)
      var date=new Date(this.model.startTime);
      date=new Date(date.setDate(date.getDate()+6));
      this.model.endTime=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' +date.getDate();
    }
  }
}
</script>

<style scoped>

</style>